<template>
<div>
</br>
</br>
    <el-radio-group v-model="size">
    <el-radio label="">默认</el-radio>
    <el-radio label="medium">中等</el-radio>
    <el-radio label="small">小型</el-radio>
    <el-radio label="mini">超小</el-radio>
  </el-radio-group>
  </br>

  <el-descriptions class="margin-top" title="个人信息" :column="2" :size="size" border>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        姓名
      </template>
      <el-input v-model="user.name"/>
      <!-- <div v-if="user.name">{{user.name}}</div> -->
      
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        
        <i class="el-icon-male"></i>
        性别
      </template>
      <el-input v-model="user.sex"/>
      <!-- <div v-if="user.sex">{{user.sex}}</div> -->

    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-message"></i>
        邮箱
      </template>
            <el-input v-model="user.email":disabled="true"/>
      <!-- <div v-if="user.email">{{user.email}}</div> -->
      
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-school"></i>
        学校
      </template>
      <el-input v-model="user.school"/>
      <!-- <div v-if="user.school">{{user.school}}</div> -->
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-school"></i>
        院系
      </template>
      <el-input v-model="user.department"/>
      <!-- <div v-if="user.school">{{user.school}}</div> -->
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-s-custom"></i>
        职位
      </template>
      <el-input v-model="user.position"/>
      <!-- <div v-if="user.school">{{user.school}}</div> -->
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        备注
      </template>
      <el-input v-model="user.remarks"/>
      <!-- <div v-if="user.remarks">{{user.remarks}}</div> -->
      
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        联系地址
      </template>
      <el-input v-model="user.address"/>
       <!-- <div v-if="user.address">{{user.address}}</div> -->
      
    </el-descriptions-item>
    <template slot="extra">
      <el-button type="primary" size="small" @click="revise()">修改</el-button>
    </template>
  </el-descriptions>
</div>
</template>


<script>
import dashboardApi from '@/api/user/dashboard.js'
  export default {
    data () {
      return {
        size: '',
        user:{
          id : '',
          name :'',
          sex :'',
          email : document.cookie.split("vue_admin_template_token=")[1].split(";")[0],
          school : '',
          remarks : '',
          address : '',
          department:'',
          position:''
        }
        
      };
    },
    created() { // 在渲染之前执行
        this.fetchData()
  
    },
    mounted() { // 在渲染之后执行   

       
    },
     // 定义方法
    methods: {
      fetchData() {
        console.log("methods3....") 
        dashboardApi.getuserinfo().then(response => {
          console.log(response) 
          this.user=response.data
      })
      },

      revise(){

        this.$confirm('是否确认修改数据', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return dashboardApi.reviseapi(this.user)
        }).then((response) => {
          
          this.$message.success(response.message)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
           
          });
          this.fetchData()
        })   
      }

    }
    
  }
</script>